<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<dev id="root" style="text-align: center">
    <h1 :style="{opacity}">hello world！</h1>  <!--插值语法-->
</dev>
<script type="text/javascript">
    //创建vue
    let vm = new Vue({
        el: '#root',  //指定vue实例位于哪个容器内
        data: {
            opacity: 1
        },
        methods:{
        },
        mounted() {
            setInterval(() => {
                this.opacity -=  0.01;
                if (this.opacity <= 0) this.opacity = 1;
            }, 10)
        },



        // data: {  //data用于存储容器
        //     name: 'ni_hao',
        //     url: 'http://www.baidu.com',
        //     school: {
        //         name: 'hpp',
        //         age: 11
        //     }
        // },

        // data: function () {
        //     return {
        //         name: 'ni_hao',
        //         url: 'http://www.baidu.com',
        //         school: {
        //             name: 'hpp',
        //             age: 11
        //         }
        //     }
        // }
    });
</script>
</body>
</html>
